// 引入
import { Component } from 'react';
import { Search, Swiper, Grid } from 'react-vant';
import { FireO,Arrow } from '@react-vant/icons';
import './index.css'
import sendHttp from '../../router/sendHttp';

// 首页组件
class Home extends Component {
    state = {
        list: [],
        menus: []
    }
    render() {

        return (

            <div className='box'>
                {/* 搜索框  react-vant 引入 */}
                <Search
                    shape="round"
                    background="red"
                    placeholder="请输入搜索关键词"
                />
                {/* 轮播  引入  修改图片样式 */}
                <div className="demo-swiper">
                    <div>
                        <div className='hezi'>

                            {
                                // 当轮播图列表长度不等于空时  遍历轮播列表的元素和索引
                                this.state.list.length !== 0 && <Swiper autoplay={5000} className='lunbo'>
                                    {this.state.list.map((item, index) => {
                                        return (
                                            <Swiper.Item key={index}>
                                                <img src={item.pic} alt="" />
                                            </Swiper.Item>)
                                    })
                                    }
                                </Swiper>
                            }


                        </div>
                    </div>
                    {/* 九宫格商品块块 */}
                    <Grid columnNum={5}>
                        <div className="menus">
                            {/* 遍历九宫格的元素和索引 */}
                            {this.state.menus.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <div>
                                            < img src={item.pic} alt="" />
                                            <div>{item.name}</div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    </Grid>
                </div>

                <div>
                    <div className='goods'>
                        <div className='goods-top'>
                            <p><FireO color='red' />商品排行榜</p>
                           <span>更多<Arrow  /></span>
                        </div>
                        <div>
                          
                        </div>
                    </div>
                </div>


            </div>
        )
    }

    // 生命周期 模块渲染 （请求数据）
    componentDidMount() {
        sendHttp('/api/front/index', 'get').then((res) => {
            console.log(res);
            // 更新数据 
            this.setState({
                list: res.data.data.banner,
                menus: res.data.data.menus,
                
            })
        })

    }
}
export default Home;